<template>
  <div class="page">

    <!-- banner 开始 -->
    <div class="banner">
      <img src="@/assets/images/car/banner.png" alt="" />
      <img src="@/assets/images/car/sub_banner.png" alt="">
    </div>
    <!-- banner end -->

    <!-- 内容区域 开始 -->
    <div class="content_box">
      <div class="info_box">
        <div class="cell_group">

          <!-- 单行 开始 -->
          <div class="cell_box">
            <img src="@/assets/images/car/icon_05.png" class="icon" alt="" />
            <div class="input_box">
              <input type="text" class="a_input" v-model="form.name" placeholder="您的姓名" />
            </div>
          </div>
          <!-- 单行 end -->

          <!-- 单行 开始 -->
          <div class="cell_box sex_box">
            <van-radio-group v-model="form.gender">
              <van-radio name="1">先生
                <template #icon="props">
                  <img class="img_icon" :src="props.checked ? activeIcon : inactiveIcon" />
                </template>
              </van-radio>
              <van-radio name="2">女士
                <template #icon="props">
                  <img class="img_icon" :src="props.checked ? activeIcon : inactiveIcon" />
                </template>
              </van-radio>
            </van-radio-group>
          </div>
          <!-- 单行 end -->

          <!-- 单行 开始 -->
          <div class="cell_box">
            <img src="@/assets/images/car/icon_02.png" class="icon" alt="" />
            <div class="input_box">
              <input type="text" class="a_input" v-model="form.loanAmount" placeholder="贷款金额(单位：万元)" />
            </div>
          </div>
          <!-- 单行 end -->

          <!-- 单行 开始 -->
          <div class="cell_box">
            <img src="@/assets/images/car/icon_01.png" class="icon" alt="" />
            <div class="input_box">
              <input type="text" class="a_input" v-model="form.mobile" maxlength="11" placeholder="输入手机号" />
            </div>
          </div>
          <!-- 单行 end -->

          <!-- 单行 开始 -->
          <div class="cell_box">
            <img src="@/assets/images/car/icon_03.png" class="icon" alt="" />
            <div class="input_box" @click="openDialog('type')">
              <input type="text" class="a_input" v-model="form.type" readonly placeholder="车辆信息" />
            </div>
            <van-icon name="arrow-down" />
          </div>
          <!-- 单行 end -->

          <!-- 单行 开始 -->
          <div class="cell_box">
            <img src="@/assets/images/car/icon_04.png" class="icon" alt="" />
            <div class="input_box" @click="openCityDialog">
              <input type="text" class="a_input" v-model="form.city" readonly placeholder="选择城市" />
            </div>
            <van-icon name="arrow-down" />
          </div>
          <!-- 单行 end -->

          <!-- 单行 开始 -->
          <div class="msg_box">
            <div class="cell_box">
              <img src="@/assets/images/car/icon_04.png" class="icon" alt="" />
              <div class="input_box">
                <input type="text" class="a_input" v-model="form.code" placeholder="输入验证码" />
              </div>
            </div>
            <button class="btn" @click="sendCode" :disabled="time> 0">{{ (time > 0) ? (time + "重新获取" ): "获取验证码" }}</button>
          </div>
          <!-- 单行 end -->
        </div>

        <div class="btn_box">
          <van-button class="btn" color="#fe8440" @click="saveInfo">提交申请</van-button>
        </div>

        <div class="xieyi_box">
          <van-checkbox v-model="checked" icon-size="14">
            <div class="checkbox_label">接受<span class="cred" @click.stop="lookContract">服务协议</span></div>
          </van-checkbox>
          <div class="tips">本产品温馨提示：车辆需在本人名下,车龄不超过5年,路程不超过10万公里,估值需5万元以上。</div>
        </div>

      </div>
    </div>
    <!-- 内容区域 end -->

    <div class="footer_box">
      <img src="@/assets/images/car/04.png" alt="">
      <img src="@/assets/images/car/05.png" alt="">
      <!-- <img src="@/assets/images/mortgage/06.png" alt=""> -->
    </div>

    <div class="footer">
      <p>摩尔龙集团</p>
      <p>Copyright 2009-2021 Edai Corporation All Rights Reserved.</p>
      <p>四川易贷网金融信息服务有限公司 版权所有</p>
      <p>摩尔龙贷款代办服务</p>
      <p>温馨提示：</p>
      <p>贷款有风险 借贷需谨慎</p>
      <p>请根据个人能力合理贷款，理性消费，避免逾期</p>
      <p>贷款额度、放款时间等以实际审批为准</p>
      <p>年化利率3.6%-12%(单利)</p>
      <p>合作机构：平安银行 2020.09.07-长期</p>
      <p>新网银行：2022.01.14-2023.1.13</p>
      <p>长银消费：2022.01.01-2022.12.31</p>
      <p>温馨提示：公积金相关资料仅作为贷款服务验资证明,</p>
      <p>放款路径与公积金账户无关</p>
      <p>备案号：蜀ICP备16029964号</p>
    </div>

    <!-- 弹框 开始 -->
    <van-popup v-model="showPopup" position="bottom">
      <van-picker title="车辆信息" show-toolbar :columns="carTypeList" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
    <!-- 弹框 end -->

    <!-- 城市弹框 开始 -->
    <van-popup v-model="showCityPopup" position="bottom">
      <div>
        <div class="action_bar">
          <div class="cancel" @click="closeCityDialog()">取消</div>
          <div class="cancel confirm" @click="onCityConfirm()">确认</div>
        </div>
        <div class="hot_city">
          <h2 class="h2">热门城市：</h2>
          <div class="city_list">
            <div class="cell" v-for="(item, index) in hotCityList" :key="index">
              <div class="cell_in" :class="hotCity == item ? 'active' : ''" @click="chooseAddress(item)">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
        <van-picker ref="cityListPicker" :columns="cityList" value-key="name" @confirm="onCityConfirm" @cancel="closeCityDialog" />
      </div>
    </van-popup>
    <!-- 城市弹框 end -->

    <!-- 协议确认弹框 开始 -->
    <van-dialog v-model="xieyiDialog" title="提示" show-cancel-button @confirm="confirmEvent" @cancel="cancelEvent">
      <div class="agreement_box">
        <agreement-contract></agreement-contract>
      </div>
    </van-dialog>
    <!-- 协议确认弹框 开始 -->

  </div>
</template>
<script>
import {
  Icon,
  Popup,
  CheckboxGroup,
  Checkbox,
  Button,
  Picker,
  Toast,
  Dialog,
  RadioGroup,
  Radio,
} from "vant";
import {
  GETCODE,
  SAVEHOUSEINFO,
  MARKETINGADD,
  GETALLCITYLIST,
  SENDMARKETINGREPORTING,
} from "@/http/car";
import { checkPhone, getUrlParams } from "@/common/util";
import AgreementContract from "./agreement";
export default {
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [CheckboxGroup.name]: CheckboxGroup,
    [Checkbox.name]: Checkbox,
    [Button.name]: Button,
    [Picker.name]: Picker,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Dialog.Component.name]: Dialog.Component,
    "agreement-contract": AgreementContract,
  },
  data() {
    return {
      showPopup: false,
      checked: false,
      carTypeList: ["名下全款车", "名下按揭车已还清", "名下按揭车接收抵押"],
      form: {},
      currentId: "",
      time: 0,
      showCityPopup: false,
      hotCityList: [],
      cityList: [],
      hotCity: "",
      xieyiDialog: false,
      activeIcon: require("@/assets/images/car/checked.png"),
      inactiveIcon: require("@/assets/images/car/unchecked.png"),
    };
  },
  mounted() {
    this.send();
    this.getCity();
  },
  methods: {

    // 打开弹框
    openDialog(id) {
      this.showPopup = true;
      this.currentId = id;
    },

    // 关闭弹框
    onCancel() {
      this.showPopup = false;
    },

    // 保存数据
    onConfirm(e) {
      console.log(e);
      let id = this.currentId;
      this.$set(this.form, id, e);
      this.onCancel();
    },

    // 获取验证码
    sendCode() {
      let that = this;
      let o = this.form.mobile;
      if (!o) {
        Toast("请输入手机号码");
        return false;
      }

      if (!checkPhone(o)) {
        Toast("手机号码格式不正确");
        return false;
      }
      that.time = 60;
      let m = setInterval(function () {
        if (that.time == 0) {
          clearInterval(m);
          that.time = 0;
          return false;
        }
        that.time -= 1;
      }, 1000);

      GETCODE({ mobile: o }).then((res) => {
        console.log(res);
        if (res.code != 0) {
          Toast.fail(res.message || res.msg || "出错了，请联系管理员");
          return false;
        }
        Toast.success(res.message || res.msg || "出错了，请联系管理员");
        //that.form.code = res.data;
      });
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      let o = this.form;
      let query = this.$route.query || {};

      if (!o.name) {
        Toast.fail("请输入姓名");
        return false;
      }

      if (!o.gender) {
        Toast.fail("请选择性别");
        return false;
      }

      if (!o.loanAmount) {
        Toast.fail("请输入贷款金额");
        return false;
      }

      if (!o.mobile) {
        Toast.fail("请输入手机号码");
        return false;
      }

      if (!checkPhone(o.mobile)) {
        Toast.fail("手机号码格式不正确");
        return false;
      }

      if (!o.type) {
        Toast.fail("请选择车辆信息");
        return false;
      }

      if (!o.city) {
        Toast.fail("请选择城市");
        return false;
      }

      if (!o.code) {
        Toast.fail("请输入验证码");
        return false;
      }

      if (!this.checked) {
        this.xieyiDialog = true;
        return false;
      }

      let oParams = {};
      oParams.name = o.name;
      oParams.loanAmount = o.loanAmount;
      oParams.city = o.city;
      oParams.mobile = o.mobile;
      oParams.channel = query.channel;
      oParams.ue = {
        type: o.type,
      };
      oParams.code = o.code;
      SAVEHOUSEINFO(oParams).then((res) => {
        if (res.code != 0) {
          Toast.fail(res.msg || res.message);
          return false;
        }
        _this.toReport();
      });
    },

    /** 进入首页 埋点 */
    send() {
      let _this = this;
      let o = getUrlParams();
      let oParams = {};
      let base64 = this.toBase64();
      oParams.accountId = o.accountId;
      oParams.channel = o.channel;
      oParams.urlBase64 = base64;
      oParams.clickId = o.gdt_vid;
      console.log(oParams);
      MARKETINGADD(oParams).then((res) => {
        if (res.code != 0) {
          Toast(res.message || res.msg || "出错了，请联系管理员");
          return false;
        }
        _this.adId = res.o;
      });
    },

    /** 获取base64 */
    toBase64() {
      let url = window.location.href;
      let n = encodeURI(url);
      var base64 = btoa(n);
      return base64;
    },

    /** 选择工作地 */
    chooseAddress(e) {
      if (this.hotCity == e) {
        this.hotCity = "";
      } else {
        this.hotCity = e;
      }
    },
    // 打开城市弹框
    openCityDialog() {
      this.showCityPopup = true;
    },

    // 关闭城市弹框
    closeCityDialog() {
      this.showCityPopup = false;
    },

    // 确认城市
    onCityConfirm() {
      let m = this.hotCity;
      let e = this.$refs.cityListPicker.getValues();
      if (!m) {
        m = e[1].name;
      }
      this.form.city = m;
      this.address = m;
      this.closeCityDialog();
    },

    /** 获取城市列表 */
    getCity() {
      let _this = this;
      let oParams = {};
      oParams.city = this.$route.query.city;
      GETALLCITYLIST(oParams).then((res) => {
        console.log(res);
        let obj = res.data || [];
        obj.map((k) => {
          k.children = k.childList || [];
        });
        console.log(obj);
        _this.cityList = obj;
        _this.hotCityList = res.msg.split(",");
        //_this.currentCity = obj.slice(0, obj.length - 1);
      });
    },

    /** 选择工作地 */
    chooseAddress(e) {
      if (this.hotCity == e) {
        this.hotCity = "";
      } else {
        this.hotCity = e;
      }
    },

    /** 广告上报 */
    toReport() {
      let _this = this;
      let oParams = {};
      oParams.mId = this.adId;
      SENDMARKETINGREPORTING(oParams).then((res) => {
        if (res.code == 0) {
          _this.$router.push({ name: "result" });
        }
      });
    },

    /** 查看合同 */
    lookContract() {
      this.xieyiDialog = true;
    },

    confirmEvent() {
      this.checked = true;
      this.saveInfo();
    },

    cancelEvent() {
      this.xieyiDialog = false;
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
</style>
<style lang="less" scoped>
@import "@/assets/styles/car.less";
</style>